<template>
  <view class="page">
    <view class="item">
      <view class="nav">
        <view class="title">
          <image
            src="@/static/icon/top.png"
            mode="scaleToFill"
            class="img"
          />
          <image src="@/static/icon/delete.png" mode="scaleToFill" />
        </view>
        <view class="content">
          <view>姓名</view>
          <view>手机号</view>
        </view>
        <view class="content tab">
          吉林省&nbsp;四平市&nbsp;梨树县&nbsp;沈洋镇&nbsp;沈洋村</view
        >
      </view>
      <view class="list">
        <view>
          <el-radio v-model="radio" label="1">默认值</el-radio>
        </view>
        <view>
          <el-button size="small">复制</el-button>
          <el-button size="small">修改</el-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: calc(100vh - 0px);
  background-color: #f5f5f5;
  color: #151516;
  .item {
    width: 100%;
    background-color: #fff;
  }
  .nav {
    width: 100%;
    padding: 20rpx 20rpx 0;
    box-sizing: border-box;
    background-color: #fff;
    .title {
      width: 100%;
      height: 40rpx;
      display: flex;
      justify-content: flex-end;
      image {
        width: 38rpx;
        height: 36rpx;
      }
      .img {
        margin-right: 20rpx;
      }
    }
    .content {
      width: 100%;
      display: flex;
      margin: 20rpx 0 26rpx;

      view:first-child {
        margin-right: 20rpx;
      }
    }
    .tab {
    }
  }
  .list {
    height: 90rpx;
    width: 100%;
    border-top: 1px solid #f5f5f5;
    padding: 20rpx;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
